Videoタグのイベント挙動サンプル

Videoタグについて調べていたのでVideoタグの挙動についてサンプルを作ってみました。属性関連もまとめました。

Videoタグとは

VideoタグはHTML5で利用可能になる新しいタグのひとつです。従来、FlashやSilverlightを利用しなければ再生できなかった動画をプラグインなしで再生できるようになります。
特に、FlashやSilverlightを利用する際にもHTML4.01、XHTMLではembedタグやobjectタグを複雑に記述しなければいけなかったのですが、Videoタグを利用することでとてもシンプルに記述することができるようになります。

Videoタグで使える主なビデオコーデック

Videoタグで使えるコーデックは主に３つあります。「Ogg Theora」「H.264」「VP8(WebM)」です。
このビデオコーデックがくせ者で、各ブラウザベンダーやその周辺の思惑で全ブラウザ共通で利用できるビデオコーデックが決まっていません。今のところはOgg TheoraとH.264かVP8とH.264のどちらかのパターンに対応しておけば大丈夫そうです。（そもそもVideoタグに対応していない場合はH.264のファイルをFlashPlayerでみられるようにするなど対応が必要です。）
コーデックについてはこちらにまとまっています。

サンプル

Videoを利用して動画を表示してみるとこんなかんじに表示されます（Videoタグに対応しているブラウザでみてね）。
Videoの再生時に発生するイベント群についても可能な範囲でまとめてみました。

イベントログ

サンプルHTMLコード

<video id="sampleVideo" controls width="100%">
	<source src='http://nonakaryuichi.me/wp-content/uploads/2011/09/big_buck_bunny.ogv' type='video/ogg; codecs="theora, vorbis"'>
	<source src='http://nonakaryuichi.me/wp-content/uploads/2011/09/big_buck_bunny.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

サンプルJavaScriptコード

var videoConsole = function(videotag, log){
	var $video = document.getElementById(videotag);
	var $log = $(log);

	this.init = function(){
		var method = this;
		
		//console.log($video);
		
		$("#sampleVideoPlay").click(function(){
			method.play();
		});
		
		$("#sampleVideoStop").click(function(){
			method.stop();
		});
		
		$("#sampleVideoReset").click(function(){
			method.reset();
		});
		
		$("#sampleVideoVolume0").click(function(){
			method.volume(0);
		});
		
		$("#sampleVideoVolume1").click(function(){
			method.volume(1);
		});
	}
	
	this.play = function()
	{
		$video.play();
	}
	
	this.stop = function()
	{
		$video.pause();
	}
	
	this.reset = function()
	{
		$video.currentTime = 0;
	}
	
	this.volume = function(num)
	{
		$video.volume = num;
	}
	
	$video.addEventListener("emptied", function(){
		$log.prepend("<li>emptied event.</li>");
	}, false);
	
	$video.addEventListener("seeking", function(){
		$log.prepend("<li>seeking event.</li>");
	}, false);
	
	$video.addEventListener("seeked", function(){
		$log.prepend("<li>seeked event.</li>");
	}, false);
	
	$video.addEventListener("loadstart", function(){
		$log.prepend("<li>load start event.</li>");
	}, false);
	
	$video.addEventListener("progress", function(){
		$log.prepend("<li>progress event.</li>");
	}, false);
	
	$video.addEventListener("canplay", function(){
		$log.prepend("<li>can play event.</li>");
	}, false);
	
	$video.addEventListener("play", function(){
		$log.prepend("<li>play event.</li>");
	}, false);
	
	$video.addEventListener("playing", function(){
		$log.prepend("<li>playing event.</li>");
	}, false);
	
	$video.addEventListener("timeupdate", function(){
		$log.prepend("<li>timeupdate event.</li>");
	}, false);
	
	$video.addEventListener("waiting", function(){
		$log.prepend("<li>waiting event.</li>");
	}, false);
	
	$video.addEventListener("pause", function(){
		$log.prepend("<li>pause event.</li>");
	}, false);
	
	$video.addEventListener("ended", function(){
		$log.prepend("<li>ended event.</li>");
	}, false);
	
	$video.addEventListener("loadedmetadata", function(){
		$log.prepend("<li>loadedmetadata event.</li>");
	}, false);
	
	$video.addEventListener("loadeddata", function(){
		$log.prepend("<li>loadeddata event.</li>");
	}, false);
	
	$video.addEventListener("canplaythrough", function(){
		$log.prepend("<li>canplaythrough event.</li>");
	}, false);
	
	$video.addEventListener("ratechange", function(){
		$log.prepend("<li>ratechange event.</li>");
	}, false);
	
	$video.addEventListener("volumechange", function(){
		$log.prepend("<li>volume change event.</li>");
	}, false);
}

$(function(){
	var video = new videoConsole("sampleVideo", "#sampleLog");
	video.init();
});

属性

属性	値	内容
src	string	動画ファイルの指定（URI）
poster	string	読み込み準備中に表示する画像の指定（URI）
width	num	幅の指定
height	num	高さの指定
autoplay	true	自動再生
	false (default)	手動再生
autobuffer	true	自動でバッファを読み込む
	false (default)	バッファを読み込まない
loop	true	繰り返し再生する
	false (default)	再生を1回で停止する
controls	true (default)	コントロールを表示する
	false	コントロールを非表示にする

イベントハンドラ

イベント	内容
loadstart	読み込み開始
progress	読み込み中
suspend	中断
load	読み込み
abort	中断
error	エラー
emptied	初期化
stalled	失速
play	再生開始
pause	再生停止
loadedmetadata	メタデータの読み込み完了
loadeddata	データの読み込み完了
waiting	待機中
playing	再生中
canplay	再生可能
canplaythrough	現在の読み込み速度から途切れずに再生可能なタイミング
seeking	捜査中
seeked	捜査完了
timeupdate	再生時間の変化
ended	終わり
ratechange	再生速度変更
durationchange	duration属性変更
volumechange	音量変更

イベント関連の内容は動作確認ができてない部分もあり詳しい挙動については未確認です。ごめんなさい。 もう少し詳しく調べたらまた載せたいと思います。

この記事は「Video」の転載です。